<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<title>酒店预订，酒店查询，宾馆住宿预订,网上订酒店-【携程旅行】</title>
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta http-equiv="x-dns-prefetch-control" content="on">
		<link rel="dns-prefetch" href="http://pic.c-ctrip.com">
		<link rel="dns-prefetch" href="http://res.m.ctrip.com">
		<link rel="dns-prefetch" href="http://images4.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webresource.c-ctrip.com">
		<link rel="dns-prefetch" href="http://webapi.amap.com">
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" />
		<style>
			.mui-table-view.mui-grid-view {
				padding-right: 6px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell {
				padding-left: 12px;
			}
			
			.mui-content {
				margin-bottom: 3.3rem;
			}
			
			h5 {
				padding: 8px 0 0;
				/*padding-bottom: 8px;*/
				margin-bottom: 0;
				text-indent: 12px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 15px;
				margin-top: 8px;
				color: #333;
			}
			
			.mui-table-view:before,
			.mui-table-view:after {
				background-color: transparent;
			}
			
			.hotel-header a {
				position: absolute;
				right: 0;
				height: 2.2rem;
				line-height: 2.2rem;
			}
			
			.hotel-header a img {
				width: 50%;
			}
			
			.cur-location {
				text-align: center;
				/*height: 2.5rem;*/
				/*line-height: 2.5rem;*/
				background-color: #fff;
				/*margin-top: -3rem;*/
			}
			
			.cur-location div {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 1.3rem;
			}
			
			.cur-location span {
				max-width: 83%;
				font-size: 0.7rem;
				color: #333;
				display: -webkit-box;
				overflow: hidden;
				text-overflow: ellipsis;
				word-wrap: break-word;
				white-space: normal !important;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.local-icon {
				width: 0.8rem;
				margin-left: 1.2rem;
				margin-bottom: 0.2rem;
				vertical-align: middle;
			}
			
			.hotel-color-gray {
				font-size: 0.7rem;
			}
			
			.mui-content>.mui-table-view:first-child {
				margin-top: 0;
			}
			
			.mui-table-view li {
				line-height: 1.3rem;
			}
			
			.mui-input-row {
				font-size: 0.7rem;
			}
			
			.mui-input-row label {
				padding: 0;
				line-height: inherit;
			}
			
			.mui-numbox {
				width: 4.1rem;
				height: 1.4rem;
				background-color: #bbb;
				margin-right: 0 !important;
			}
			
			.mui-numbox input {
				visibility: hidden;
			}
			
			.mui-input-row .description {
				position: absolute;
				font-size: 0.7rem;
				height: 1.1rem;
				line-height: 1.1rem;
				top: 50%;
				margin-top: -0.55rem;
				right: 1.75rem;
			}
			
			.mui-input-row .hotel-fixed-area {
				position: absolute;
				top: 0;
				right: 0;
				width: 3rem;
				height: 100%;
				text-align: center;
			}
			
			.hotel-fixed-area .fa-map-marker {
				position: absolute;
				font-size: 1.1rem;
				top: 50%;
				right: 1rem;
				margin-top: -0.55rem;
			}
			
			.mui-active {
				color: #ff0066!important;
			}
			
			.mui-slider-item img {
				height: 7.5rem;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<h1 class="mui-title">酒店搜索</h1>
			<a href="#" data-url="./more.html">
				<img src="../styles/images/category1.png" />
			</a>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../styles/images/yuantiao.jpg">
					</a>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../styles/images/shuijiao.jpg">
					</a>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../styles/images/muwu.jpg">
					</a>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../styles/images/cbd.jpg">
					</a>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
					<a href="#">
						<img src="../styles/images/yuantiao.jpg">
					</a>
				</div>
				<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<a href="#">
						<img src="../styles/images/shuijiao.jpg">
					</a>
				</div>
			</div>
			<div class="mui-slider-indicator">
				<div class="mui-indicator mui-active"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
				<div class="mui-indicator"></div>
			</div>
		</div>
			<ul class="mui-table-view" style="margin: 0.6rem;">
				<li class="mui-table-view-cell cur-location">
					<div class="hotel-fixed-area">
						<span>深圳市南山区海天二路</span>
						<img class="local-icon" src="../styles/images/address2.png" />
					</div>
				</li>
				<li class="mui-table-view-cell mui-input-row content-list" data-url="./city.html">
					<label id="city">
						深圳
					</label>
					<div class="hotel-fixed-area">
						<i class="fa fa-map-marker hotel-color-gray"></i>
					</div>
				</li>
				<li class="mui-table-view-cell mui-input-row" data-url="./calendar.html">
					<!--data-event='tap>pickeDate'-->
					<a class="mui-navigate-right">
						{{beginDate | date}}
						<span class="description"><span class="hotel-color-gray">周{{beginDate | week}}</span> 入住</span>
					</a>
				</li>
				<!--<li class="mui-table-view-cell mui-input-row">
					<label>
						住 {{dayNum}} 晚 <span class="description" style="right: 5.25rem; text-align: right;">
							<span class="hotel-color-gray">{{endDate | date}}(周{{endDate | week}})</span> 离店</span>
					</label>
					<div class="mui-numbox" data-numbox-min='1'>
						<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
						<input data-event='change>changeDayNum' class="mui-numbox-input" type="number" value="1" />
						<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>
				</li>-->
				<li class="mui-table-view-cell mui-input-row" data-url='./query-keyword.html'>
					<a class="mui-navigate-right hotel-color-gray">
						酒店名、地址等
					</a>
				</li>
				<!-- 价格、星级 -->
				<!--<li data-event='tap>setPriceFilter' class="mui-table-view-cell mui-input-row">
					<a class="mui-navigate-right hotel-color-gray">
						{{priceAndStar}}
					</a>
				</li>-->
			</ul>
			<div class="mui-content-padded">
				<button data-url='./hotel-list2.html' type="button" class="mui-btn mui-btn-block mui-btn-warning hotel-btn-main">搜索</button>
			</div>

			<div class="mui-content" style="border-radius: 5px;background-color:#fff;margin: 2rem 0.6rem;">
				<h5>慢生活</h5>
				<ul class="mui-table-view mui-grid-view" style="">
					<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="./hotel-detail2.html">
						<a href="#">
							<img class="mui-media-object" src="../styles/images/avatar-icon2.png">
							<div class="mui-media-body">幸福就是可以一起睡觉</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="./hotel-detail2.html">
						<a href="#">
							<img class="mui-media-object" src="../styles/images/avatar-icon3.png">
							<div class="mui-media-body">想要一间这样的木屋，静静的喝咖啡</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="./hotel-detail2.html">
						<a href="#"><img class="mui-media-object" src="../styles/images/avatar-icon4.png">
							<div class="mui-media-body">Color of SIP CBD</div>
						</a>
					</li>
					<li class="mui-table-view-cell mui-media mui-col-xs-6" data-url="./hotel-detail2.html">
						<a href="#">
							<img class="mui-media-object" src="../styles/images/avatar-icon1.png">
							<div class="mui-media-body">静静看这世界</div>
						</a>
					</li>
				</ul>
			</div>
		</div>
		<nav class="mui-bar mui-bar-tab">
			<a id="defaultTab" class="mui-tab-item mui-active" href="index.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-chat.html">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
				<span class="mui-tab-label">资讯</span>
			</a>
			<a class="mui-tab-item" href="tab-webview-subpage-contact.html">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">社区</span>
			</a>
			<a class="mui-tab-item" href="user-center.html" data-url="./user-center.html">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<script src="../mui/js/mui.min.js"></script>
		<!--<script src="../mui/js/mui.picker.min.js"></script>-->
		<script src="../libs/ems.js" data-main='./index.js'></script>
		<script src="//cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
		<script type="text/javascript">
			mui.init();
			//添加newId自定义事件监听
			window.addEventListener('newsId', function(event) {
				//获得事件参数
				var id = event.detail.id;
				//根据id向服务器请求新闻详情
				var city = document.getElementById('city');
				city.innerHTML = id;
			});

			var slider = mui("#slider");
				slider.slider({
					interval: 2000
				});
		</script>
	</body>

</html>